<template>
  <div
    class="flex items-center cursor-pointer text-[#e54c5f]"
    @click="handleGo"
  >
    <el-icon>
      <ArrowLeftBold />
    </el-icon>
    <span class="pl-5">提现审核</span>
  </div>

  <el-card class="my-5">
    <div class="flex">
      <div class="flex-1">
        <h4 class="mb-8">提现信息</h4>
        <div class="mb-5">
          <span>流水号:</span>
          <span class="ml-5">{{ info.order_no }}</span>
        </div>
        <div class="mb-5">
          <span>提现币种:</span>
          <span class="ml-5">{{ info.currency }}</span>
        </div>
        <div class="mb-5">
          <span>提现金额:</span>
          <span class="ml-5">{{ info.amount }}</span>
        </div>
        <div class="mb-5">
          <span>提现时间:</span>
          <span class="ml-5">{{ formatDates(info.create_time) }}</span>
        </div>
      </div>
      <div class="flex-1">
        <h4 class="mb-8">收款账户信息</h4>
        <div class="mb-5">
          <span>提现银行:</span>
          <span class="ml-5">{{ info.bank }}</span>
        </div>
        <div class="mb-5">
          <span>支行:</span>
          <span class="ml-5">{{ info.branch }}</span>
        </div>
        <div class="mb-5">
          <span>持卡人:</span>
          <span class="ml-5">{{ info.card_name }}</span>
        </div>
        <div class="mb-5">
          <span>提现卡号:</span>
          <span class="ml-5">{{ info.card_number }}</span>
        </div>
      </div>
    </div>
    <div class="w-full flex justify-center pt-5">
      <el-button class="w-40" @click="handleClick(2)">拒绝</el-button>
      <el-button plain color="#e54c5f" class="w-40" @click="handleClick(1)"
        >审核通过</el-button
      >
    </div>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    :title="form.status == 1 ? '确认通过审核' : '拒绝审核'"
    width="30%"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <el-input
      v-model="form.reason"
      :rows="2"
      type="textarea"
      placeholder="填写审批意见（选填）"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";

import { withdrawAuditApi, withdrawDetailApi } from "@/api/account/index";
import { ElMessage } from "element-plus";
import { formatDates } from "@/utils/utils";
const router = useRouter();

const dialogVisible = ref(false);
const { ...route } = useRoute();
const info = reactive({});
const form = reactive({
  reason: "",
  order_no: "",
  status: 0,
});
const resetForm = reactive({ ...form });

onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
const getData = async (order_no) => {
  try {
    const res = await withdrawDetailApi({ order_no: order_no });
    Object.assign(form, res);
  } catch (error) {}
};

const handleClick = (value) => {
  form.status = value;
  dialogVisible.value = true;
};
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(form, resetForm);
};
// 提交
const submit = async () => {
  try {
    form.order_no = route.query.order_no;
    const res = await withdrawAuditApi(form);
    ElMessage({
      showClose: true,
      message: "成功",
      type: "success",
    });
    handleClose();
  } catch (error) {
    handleClose();
  }
};
const handleGo = () => {
  router.replace(`/account/withdraw`);
};
</script>
